import React,{useState} from "react";

import { Tree , Alert,Button,message} from 'antd';


const { DirectoryTree } = Tree;


const App = () => {

  const treeData = [
    {key:'1',title:'单选题', children: [{
      key: '1-5',
        isLeaf: true,
      title: '看图选文 ： 看图片选择文字',
    }, {
      key: '1-3',
        isLeaf: true,
      title: '看文选文 ： 看图片选择文字',
    }, {
      key: '1-2',
        isLeaf: true,
      title: '听音选图 ： 看图片选择文字',
    }, {
      key: '1-10',
        isLeaf: true,
      title: '听音选音 ： 看图片选择文字',
    },{
      key: '1-9',
        isLeaf: true,
      title: '看文选音',
    },{
      key: '1-1',
        isLeaf: true,
      title: '听音选文',
    },{
      key: '1-4',
        isLeaf: true,
      title: '看文选图',
    }]
  }, {
    key: '2',
    title: '判断题',
    children: [{
      key: '2-1',
      isLeaf: true,
      title: '听音选文',
    }]
  }, {
    key: '6',
    title: '识读题',
    children: [{
      key: '6-7',
      isLeaf: true,
      title: '看文跟读', 
    }]
  }, {
    key: '7',
    title: '看图拼词',
    children: [{
      key: '7-5',
      isLeaf: true,
      title: '看图选文',
    }]
  }, {
    key: '4',
    title: '排序题',
    
    children: [{
      key: '4-3',
      isLeaf: true,
      title: '看文选文',
    }, {
      key: '4-4',
      isLeaf: true,
      title: '看文选图',
    }]
  }, {
    key: '5',
    title: '连线题',
    children: [{
      key: '5-2',
      title: '听音选图',
      isLeaf: true,
    }, {
      key: '5-4',
      isLeaf: true,
      title: '看文选图',
    }]
  }
  ]
  

   const [item,setItem] = useState('')
  
    const onSelect = (keys, info) => {
      setItem(keys)
    };
  
    const onExpand = () => {
      console.log('Trigger Expand');
      console.log(item);
    };
   const editText = () => {
     message.success('你当前选择的题型加题目形式为' + item)
   }
  return <div className="app-content animate__animated animate__fadeIn">

<Alert style={{textAlign:'center'}} message="题目文案说明配置" type="success" />

<Button onClick={editText} disabled={!item} type={'primary'} style={{margin:'10px 0'}}>编辑文案</Button>

   <DirectoryTree
      multiple
      defaultExpandAll
      onSelect={onSelect}
      onExpand={onExpand}
      treeData={treeData}
    />
  </div>
}

export default App